<template>
  <div class="grey_bg">
    <navigate>线上咨询记录</navigate>
    <search-input
      type="text"
      v-model="value"
      placeholder="搜索咨询师姓名或咨询内容"
    ></search-input>
    <div class="main_content">
      <div class="record_list">
        <div
          class="record_item"
          v-for="(r, i) in list"
          :key="i"
          @click="operateClick(r)"
        >
          <div class="user_avatar" :class="{ new_message: r.is_read == 0 }">
            <img :src="joinUrlImg(r.user_avatar)" alt="" class="" />
          </div>

          <div class="user_detail">
            <div class="detail_row1">
              <div class="user_nickname text_ellipsis">{{ r.nickname }}</div>
              <img
                class="user_sex"
                :src="
                  require(`@/assets/images/common/${
                    r.sex == 1 ? 'man' : 'female'
                  }.png`)
                "
                alt=""
              />
              <div class="user_age text_justify">{{ r.age }}岁</div>
              <div
                class="chat_status"
                :class="[r.is_end == 0 ? 'status_doing' : 'status_overing']"
              >
                {{ r.is_end == 0 ? "沟通中" : "已完结" }}
              </div>
              <div class="chat_date text_justify">
                {{ formatDate(r.create_time * 1000, "yyyy/MM/dd") }}
              </div>
            </div>
            <div class="detail_row2 text_ellipsis">
              {{ r.question_details }}
            </div>
          </div>
        </div>
      </div>
      <div class="no_more" v-if="loadingOver">无更多咨询记录了</div>
    </div>

    <popup-slot-operate
      :visible.sync="operateVisible"
      :options="options"
      @click="clickItem"
    ></popup-slot-operate>
  </div>
</template>

<script>
import searchInput from "@/components/searchInput/index.vue";
import popupSlotOperate from "@/components/popupSlotOperate/index.vue";
// import { apiConsultRecord, apiDeleteConsult } from "@/api/consult.js";
import { formatDate } from "@/utils/time";
import { debounce } from "@/utils/debounce";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  components: {
    "search-input": searchInput,
    "popup-slot-operate": popupSlotOperate,
  },
  data() {
    return {
      value: "",
      operateVisible: false,
      options: ["查看详情", "删除记录"],
      list: [],
      //当前行项
      currentItem: "",
      _debounceFn: null,
      loadingOver: false,
    };
  },
  watch: {
    value(nV) {
      this._debounceFn();
    },
  },
  methods: {
    joinUrlImg,
    // 搜索防抖
    _debounce() {
      this._debounceFn = debounce(() => {
        this.consultRecord();
      }, 500);
    },
    formatDate,
    operateClick(r) {
      this.currentItem = r;
      this.operateVisible = true;
    },
    async clickItem(r) {

      this.operateVisible = false;
      if (r == "删除记录") {
        this.$popup({
          title: "提示",
          message: `<div>确定要删除本条记录吗？</div>`,
          confirmOperate: async () => {
            const params = {
              id: this.currentItem.id,
            };
            const { data } = await apiDeleteConsult(params);
            if (data.code == 200) {
              this.consultRecord();
            }
          },
        });
      } else {
        this.$router.push(
          `/consultationRecordDetail/${this.currentItem.id}/${this.currentItem.nickname}/${this.currentItem.consultant_id}`
        );
      }
    },
    // 线上咨询记录
    async consultRecord() {
      const { data } = await apiConsultRecord({ question_details: this.value });
      if (data.code == 200) {
        this.list = data.data.data;
        this.loadingOver = true;
      }
    },
  },
  created() {
    this._debounce();
    this.consultRecord();
  },
};
</script>

<style scoped>
.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}
.text_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text_justify {
  text-align: justify;
  word-break: keep-all;
}

.search_input {
  margin: 9.38px auto 7.99px;
}

.main_content {
  height: calc(100% - 101.6562px);
  overflow-y: auto;
}
.record_list {
  width: 354.17px;
  background: #ffffff;
  border-radius: 6.94px;
  padding: 0 10.42px;
  box-sizing: border-box;
  margin: 0 auto;
}
.record_item {
  height: 83.33px;
  display: flex;
  gap: 10.42px;
  align-items: center;
  position: relative;
}
.record_item:not(:last-child)::before {
  display: block;
  width: 333.33px;
  height: 0.35px;
  background: #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}
.user_avatar {
  width: 55.56px;
  height: 55.56px;
  position: relative;
}
.user_avatar img {
  width: 100%;
  height: 100%;
  border-radius: 9.26px;
}
.new_message::before {
  position: absolute;
  width: 10.42px;
  height: 10.42px;
  background: #ff6161;
  border-radius: 50%;
  content: "";
  top: -3.47px;
  right: -3.47px;
}
.user_detail {
  width: calc(100% - 65.98px);
  display: grid;
  gap: 13.54px;
  align-content: space-between;
  padding-top: 4.86px;
}
.detail_row1 {
  display: flex;
  line-height: 20.14px;
  position: relative;
}
.user_nickname {
  width: fit-content;
  max-width: 70.2px;
  height: 20.14px;
  font-size: 16.67px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  margin-right: 6.6px;
}
.user_sex {
  width: 16.67px;
  height: 20.14px;
  margin-right: 6.25px;
}
.user_age {
  width: 34.38px;
  height: 16.32px;
  font-size: 16.67px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  margin-right: 9.72px;
}
.chat_status {
  width: 45.14px;
  height: 20.14px;
  line-height: 20.14px;
  border-radius: 3.47px;
  font-size: 11.81px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}
.status_doing {
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 10%),
    #00aeff;
}
.status_overing {
  background: #dddddd;
}
.chat_date {
  width: 60.76px;
  font-size: 11.11px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #aaaaaa;
  position: absolute;
  right: 0;
  top: 0;
}
.detail_row2 {
  max-width: 236.11px;
  height: 20.83px;
  line-height: 20.83px;
  font-size: 13.19px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #aaaaaa;
}
.no_more {
  width: fit-content;
  height: 116.66px;
  line-height: 116.66px;
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #777777;
  position: relative;
  margin: 0 auto;
}
.no_more::before,
.no_more::after {
  width: 34.72px;
  height: 0.35px;
  display: block;
  content: "";
  background: #777777;
  position: absolute;
  top: 58.33px;
}
.no_more::before {
  left: -55.55px;
}
.no_more::after {
  right: -55.55px;
}
</style>